<template>
	<view class="wui-topTips" :class="[value_ ? 'wui-topTips-show' : 'wui-topTips-hidd', 'wui-topTips-type-' + type_]"
		:style="[topTipsTopComputed, topTipsHeightComputed, colorComputed, topTipsZindexComputed]">
		<text v-if="title_">{{ title_ }}</text>
		<block v-else>
			<slot></slot>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'w-topTips',
		props: {
			// 延迟关闭时间
			duration: {
				type: [String, Number],
				default: 3000
			},
			// 类型
			type: {
				type: String,
				default: 'info'
			},
			// 提示内容
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				value_: false,
				type_: this.type,
				title_: this.title,
				timer: null
			};
		},
		computed: {
			topTipsTopComputed() {
				return {
					'--top': this.systemInfo.statusBarHeight + 'px'
				};
			},
			topTipsHeightComputed() {
				const systemInfo = this.systemInfo;
				let customBar = 0;
				// #ifdef MP-WEIXIN
				const custom = wx.getMenuButtonBoundingClientRect();
				customBar = custom.bottom + custom.top - systemInfo.statusBarHeight - systemInfo.statusBarHeight;
				// #endif
				// #ifdef H5
				customBar = 44;
				// #endif
				return {
					'--height': customBar + 'px'
				};
			},
			topTipsZindexComputed() {
				return {
					zIndex: this.uniWuiConfig.zIndex.topTips
				};
			},
			colorComputed() {
				let {
					primary,
					success,
					warning,
					info
				} = this.uniWuiConfig.theme;
				return {
					'--primary': primary,
					'--success': success,
					'--warning': warning,
					'--info': info
				};
			}
		},
		methods: {
			show(options = {}) {
				let {
					type,
					duration,
					title
				} = options;
				if (this.timer) return false;
				this.value_ = true;
				this.type_ = type || this.type;
				this.title_ = title || this.title;
				this.timer = setTimeout(() => {
					this.value_ = false;
					clearTimeout(this.timer);
					this.timer = null;
				}, duration || this.duration || 3000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wui-topTips {
		width: 100%;
		position: fixed;
		top: var(--top);
		left: 0;
		height: var(--height);
		transition: all 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.wui-topTips-hidd {
		transform: translateY(0);
	}

	.wui-topTips-show {
		transform: translateY(var(--height));
	}

	.wui-topTips-type-primary {
		background-color: var(--primary);
		color: #34495e;
	}

	.wui-topTips-type-success {
		background-color: var(--success);
	}

	.wui-topTips-type-info {
		background-color: var(--info);
	}

	.wui-topTips-type-warning {
		background-color: var(--warning);
	}
</style>
